<script setup lang="ts">
import {Sunrise} from "@element-plus/icons-vue";

const homeOne = [
  {
    num1: '125,12',
    num2: '-12.32',
    num3: '订单统计信息',
    num4: 'iconfont icon-shouye_dongtaihui',
    color1: '#FF6462',
    color2: '--el-color-primary-light-8',
    color3: '--el-color-primary'
  },
  {
    num1: '653,33',
    num2: '+42.32',
    num3: '月度计划信息',
    num4: 'iconfont icon-ditu',
    color1: '#6690F9',
    color2: '--el-color-success-light-8',
    color3: '--el-color-success'
  },
  {
    num1: '125,65',
    num2: '+17.32',
    num3: '年度计划信息',
    num4: 'iconfont icon-zaosheng',
    color1: '#6690F9',
    color2: '--el-color-warning-light-8',
    color3: '--el-color-warning'
  },
  {
    num1: '520,43',
    num2: '-10.01',
    num3: '访问统计信息',
    num4: 'iconfont icon-shuxingtu',
    color1: '#FF6462',
    color2: '--el-color-danger-light-8',
    color3: '--el-color-danger'
  }
]
</script>

<template>
  <el-row class="my5" :gutter="5">
    <el-col v-for="(v, k) in homeOne" :key="k" :span="6">
      <div
        class="home-top flex"
        :style="{border: 'var(--el-border)'}">
        <div class="flex w100" :class="`home-one-animation${k}`">
          <div>
            <span class="font14">{{ v.num1 }}</span>
            <span class="font10" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
            <div class="font12">{{ v.num3 }}</div>
          </div>
          <div class="home-top-icon flex align-center justify-center ml-auto"
               :style="{ background: `var(${v.color2})` }">
            <el-icon class="font20" :style="{ color: `var(${v.color3})` }">
              <Sunrise/>
            </el-icon>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss">
.home-top {
  width: 100%;
  border-radius: 4px;
  transition: all ease 0.2s;
  padding: 5px;
  overflow: hidden;
  cursor: pointer;

  &-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;

    i {
      color: var(--el-text-color-placeholder);
    }
  }
}
</style>
